import React from 'react';
import { Tag } from 'antd';

export default class BlogButton extends React.Component{
  // constructor(props) {
  //   super(props);
  // }

  showBlogListInStatus = (e) =>{
    e.preventDefault();
    let status = e.target.name
    console.log('button的status是'+status);
    this.props.handleToggleStatusButton(status)
  }

  render(){
    return(
      <div>
        <Tag color="#2db7f5"><a href='/#all' name='all_blog' onClick={this.showBlogListInStatus}>全部</a></Tag>
        <Tag color="orange-inverse"><a href='/#pending' name='pending_blog' onClick={this.showBlogListInStatus}>未完成</a></Tag>
        <Tag color="#87d068"><a href='/#finished' name='finished_blog' onClick={this.showBlogListInStatus}>已完成</a></Tag>
        <Tag color="red-inverse" onClick={this.clearAll}>清除</Tag>
        <hr />
      </div>
    )
  }

  clearAll = () => {
    this.props.handleClearAll()
  }

  // <button type="button" href='/#all' name='all_blog' className="btn btn-info" onClick={this.showBlogListInStatus}>全部</button>
  // <button type="button" name='pending_blog' style={{marginLeft: 10, marginRight: 10}} className="btn btn-warning" onClick={this.showBlogListInStatus} >未完成</button>
  // <button type="button" name='finished_blog' onClick={this.showBlogListInStatus} className="btn btn-success">已完成</button>
  // <Button type="danger" style={{marginLeft: 10}} onClick={this.clearAll}>清空所有</Button>

}
